<template>
	<view class="container">
		<u-navbar :autoBack="true" :title-bold='true' :border-bottom='false' :placeholder="true" title='点赞、认可'>
		</u-navbar>

		<view class="topEvent card">
			<navigator class="left" :url="'/sub/session-info/dianzan?id='+docker">
				<image src="../../static/icon/share.png" mode="widthFix"></image>
				<view>
					让好友点评
					<p>分享好友抵扣￥10</p>
				</view>
			</navigator>

			<view class="right" @click="HandlerEvent">
				<!-- <view class="right" @click="HandlerEvent" :style="{background:isLike?'#FFB761':''}"> -->
				<image :src="isLike?'../../static/icon/like.png':'../../static/icon/unlike.png'" mode="widthFix">
				</image>
				<view>
					点赞
					<p>共获得{{likeNum}}次</p>
				</view>
			</view>
		</view>


		<view class="item card" v-for="(item,index) in list" :key="index" @click="open(item.id)">
			<view class="left">
				<image :src="item.image" mode=""></image>
				<view class="user">
					<view>
						{{item.title}}
						<span class="price" v-if="myJob==1 && item.type!=1 && item.type!=4 ">￥{{item.price}}</span>
					</view>
					<p>{{item.subtitle}}</p>
					<p v-if="item.type!=4">{{item.msg}}</p>
				</view>
			</view>
			<view class="give" v-if="myJob==1 && item.type!=1 && item.type!=4">立即赠送</view>
			<view class="give_random" v-else-if="item.type==4">
				<view class="give" v-if="myJob==1">随机赠送</view>
				<span>￥{{item.msg}}</span>
			</view>
			<span v-else class="price">￥{{item.price}}</span>
		</view>
		<!--  -->

		<!-- 支付弹窗 -->
		<u-popup v-model="show" mode="bottom" @close="closed" :closeable="true">
			<view class="popup" :class=" false ?'popup-p':''">
				<!--  -->
				<view class="s1">
					<image :src="obj.image" mode="widthFix"></image>
					<view>
						{{obj.title}}
						<view class="re">
							<p>￥<span>{{obj.price}}</span></p>
							<view @click="randomPrice" v-if="obj.type==4" class="remoney">
								<image style="width: 14px;" src="../../static/img/re.png" mode="widthFix"></image>
								换个金额
							</view>
						</view>
					</view>
				</view>
				<u-line margin='20rpx 0'></u-line>
				<!-- 描述 -->
				<view>
					<view class="card" v-if="obj.type!=4">
						<p><span>{{obj.msg}}</span></p>

					</view>
					<!-- 备注 -->
					<view class="remake" v-if="obj.type!=4">
						<view>注: 所有的护航员，都是下班后业余咨询，</view>
						<view>不保证: 当天一定会回复，</view>
						<view>但是，也可能秒回。</view>
						<p>当日事，当日毕，我们会尽量当天回复。</p>
						<p>感谢信任!</p>
					</view>
					<view class="remake" v-else>
						<view>感谢护航员，既往，在健康行业的努力、深入研究。</view>
						<view>因为，有了护航员曾经的努力和深入研究，</view>
						<view>现如今，我们遇到生活问题，才可以轻易解决！</view>
						支持护航员，支持继续为大家的美好生活，深耕！
					</view>
				</view>
				<!-- 护航员端 感恩 -->
				<view v-if="myJob==2 && obj.type==4" class="ganen">
					<p>他们助力我继续学习、深耕</p>
					<view class="g-e" v-for="item in helpList">
						<view class="g-e-a">
							<u-avatar :src="item.avatar" size='48'></u-avatar>
							<span>{{item.username}} </span>
							<view>{{item.createtime}}</view>
						</view>
						<view class="price">￥ {{item.pay}}</view>
					</view>
				</view>
				<!-- 用户端 -->
				<view v-if="myJob==1">
					<u-line margin='20rpx 0'></u-line>
					<!-- 感恩 -->
					<view class="card" v-if="obj.type==4">
						<view style="width: 100%;">
							<span>既往支持过的朋友们</span>
							<view class="other">
								<view class="o-u" v-for="item in helpList">
									<u-avatar :src="item.avatar" size='48'></u-avatar>
									<span>{{item.username}}</span>
								</view>
							</view>
						</view>
					</view>
					<!-- 优惠券 -->
					<view class="card coupon" v-if="obj.type!=4">
						<span>晴空万里券</span>
						<view @click="goTo('/sub/center/mine/discount?id='+docker)">
							<span class="price">{{coupon.money?coupon.money+'元':'未选择'}}</span>
							<u-icon name="arrow-right" color="#c0c4cc" size="20"></u-icon>
						</view>
					</view>

					<!-- 支付 -->
					<view class="card pay">
						<view class="left">
							<span>合计:</span>
							<span>￥</span>
							<span>{{obj.price}}</span>
						</view>
						<view @click="submit" class="right give click">立即支付</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		goods,
		confirm,
		createOrder,
		getLike,
		like
	} from '@/api/index.js'
	export default {
		data() {
			return {
				show: false,
				list: [],
				obj: {},
				docker: '',
				myJob: 1,
				likeNum: 0,
				isLike: 0,
				coupon: {},
				helpList: []
			}
		},
		onLoad(e) {
			if (e.id) this.docker = e.id
			let user = this.ws.getUserInfo()
			this.myJob = user.job

			if (this.myJob == 2) { //护航员查看自己
				this.docker = user.id
			}
		},
		onShow() {
			this.init()
		},
		watch: {
			coupon(newdata) {
				if (newdata.money)
					this.obj.price -= newdata.money
			},
			obj(newdata) {
				if (newdata.type == 4) {
					this.randomPrice()
				}
			}
		},
		methods: {
			randomPrice() {
				let area = this.obj.msg
				let size = [...area.split('~')]
				let min = parseInt(size[0])
				let max = parseInt(size[1])
				this.obj.price = Math.floor(min + Math.random() * (max - min))
			},
			init() {
				let that = this
				goods().then(res => {
					if (res.code == 1) {
						that.list = res.data.list
					}
				})
				getLike({
					doctor_id: that.docker
				}).then(res => {
					if (res.code == 1) {
						that.likeNum = res.data.likeNum
						that.isLike = res.data.isLike
					}
				})
			},
			open(id) {
				let that = this
				that.coupon = {}
				confirm({
					id: id,
					doctor_id: that.docker
				}).then(res => {

					if (res.code == 1) {
						that.obj = res.data.goods
						that.helpList = [...res.data.helpList]
						if (that.myJob == 2) {
							that.helpList = [...res.data.helpList2]
						}
						that.show = true
					} else {
						that.show = false
						uni.showToast({
							title: '未获取到商品详情',
							icon: 'none'
						})
					}
				})
			},
			closed() {
				this.show = false
				this.obj = {}
			},
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			HandlerEvent() {
				let that = this
				like({
					doctor_id: that.docker
				}).then(res => {
					if (res.code == 1) {
						getLike({
							doctor_id: that.docker
						}).then(res => {
							if (res.code == 1) {
								that.likeNum = res.data.likeNum
								that.isLike = res.data.isLike
							}
						})
					}
				})
			},
			submit() {
				let that = this,
					data = {
						goods_id: that.obj.id,
						num: 1,
						doctor_id: that.docker,
						use_coupon_id: that.coupon.id,
						money: that.obj.price
					}
				createOrder(data).then(res => {
					if (res.code == 1) {
						let url = '/sub/pay/pay?orderId=' + res.data.order_id + '&price=' + that.obj.price
						that.goTo(url)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.price {
		color: #6EC9E1;
		margin: 16rpx;
	}

	.container {
		height: auto;
		padding: 30rpx;

		.topEvent {
			color: #FFF;
			margin-bottom: 15px;
			padding-top: 30rpx;

			.left,
			.right {
				width: 50%;
				min-width: 160px;
				height: 70px;
				border-radius: 7px;
				display: inherit;
				align-items: center;
				justify-content: center;

				image {
					margin-right: 20rpx;
					width: 24px;
				}

				p {
					font-size: 12px;
				}
			}

			.right {
				background: #FDA43B;
				margin-left: 15px;
			}

			.right:active {
				transform: scale(0.9);
			}

			.left {
				background: #6EC9E1;
			}

			.left:active {
				transform: scale(0.9);
			}


		}

		.card {
			background-color: #FFF;
			border-bottom: 0.5rpx solid rgba(207, 207, 207, 0.2);
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.give {
			background-color: #6EC9E1;
			color: #FFF;
			padding: 0 20rpx;
			width: 75px;
			height: 36px;
			font-size: 13px;
			border-radius: 2px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.item {
			padding: 20rpx 30rpx;
			line-height: 25px;
			font-size: 16px;

			.left {
				display: flex;
				align-items: center;

				image {
					height: 66px;
					width: 66px;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				p {
					font-size: 13px;
					color: #999999;
				}
			}

			.Reward {
				background-color: #6EC9E1;
				border-radius: 30rpx;
				height: 30px;
				line-height: 30px;
				color: #FFF;
				padding: 0 20rpx;
				font-size: small;
				margin-right: 10rpx;
			}

			.give_random {
				view {
					height: 28px;
					height: 28px;
				}

				span {
					width: 75px;
					font-size: 13px;
					color: #6EC9E1;
				}
			}
		}

		.popup {
			height: auto;
			max-height: 70vh;
			min-height: 45vh;
			width: 100%;
			padding: 30rpx 0;
			font-size: 13px;
			position: relative;

			.s1 {
				display: flex;
				align-items: center;
				line-height: 30px;
				padding: 0 35rpx;
				font-size: 20px;
				width: 100%;

				image {
					width: 80px;
					border: 0.5rpx solid rgba(207, 207, 207, 0.2);
					border-radius: 15rpx;
					margin-right: 20rpx;
				}

				view {
					width: 100%;
				}

				.re {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.remoney {
					width: 92px;
					min-width: 92px;
					height: 28px;
					border-radius: 198px;
					color: #6EC9E1;
					background: #F3FAFC;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 13px;

					image {
						margin-right: 10rpx;
					}
				}

				p {
					font-size: 13px;

					span {
						color: #6EC9E1;
						margin-left: 8rpx;
						font-size: 24px;
					}
				}
			}

			.other {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				font-size: 14px;
				margin-top: 20rpx;
				width: 100%;

				.o-u {
					width: 33%;
					display: flex;
					align-items: center;

					span {
						margin-left: 8px;
						line-height: 60px;
					}
				}
			}

			.ganen {
				width: 100%;
				margin-top: 20rpx;
				padding: 0 30rpx;
				padding-bottom: 80px;

				p {
					margin: 20px 0;
					font-weight: 550;
				}

				.g-e {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

				}

				.g-e-a {
					display: inherit;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					color: #4C4C4C;
					font-size: 14px;

					span {
						margin-left: 8px;
					}

					view {
						color: #B3B3B3;
						font-size: 12px;
						margin-left: 20px;
					}
				}
			}

			.remake {
				background: #F9F9F9;
				font-size: 13px;
				padding: 25rpx 35rpx;
				color: #666666;
				font-weight: normal;
				line-height: 25px;
				letter-spacing: 0em;

				p {
					color: #FF3232;
				}
			}

			.pay {
				position: sticky;
				width: 100%;
				bottom: 0;
				right: 0;

				.left {
					span {
						font-size: 12px;
					}

					:first-child {
						font-size: 15px;
						margin-right: 20rpx;
					}

					:last-child {
						font-size: 20px;
						font-weight: bold;
					}
				}

				.right {
					height: 50px;
					width: 132px;
				}
			}

			.flags {
				padding: 0 30rpx;
				margin-top: 20rpx;

				.f-c {
					margin-top: 20rpx;
					padding: 25rpx 35rpx;
					border: 1rpx solid rgba(207, 207, 207, 0.2);
					border-radius: 8rpx;
					font-size: 12px;
					color: #999999;

					p {
						font-size: 14px;
						color: #3D3D3D;
						margin-top: 10rpx;
					}
				}

				.f-c-e {
					border: 0.5px solid #6EC9E1;
					background: #F7FCFD;
					color: #6EC9E1;

					p {
						color: #6EC9E1;
					}
				}
			}
		}

		.popup-p {
			height: 45vh;
		}
	}
</style>